<template>
  <div class="card" :class="['type' + type]" @click="handleSetLineChartData(type)">
    <template v-if="$slots.default">
      <slot />
    </template>
    <template v-else>
      <div class="top">
        <span class="title">
          {{ param.title }}
        </span>
      </div>
      <div class="center">
        <count-to :start-val="0" :end-val="param.money * 1" :decimals="param.decimals" :duration="2600" class="money" />
      </div>
      <div class="bottom">
        <span class="desc">
          {{ param.desc }}
        </span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Card',
  components: {
    CountTo: () => import('vue-count-to')
  },
  props: {
    type: {
      type: String
    },
    param: {
      type: Object
    }
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 10px 20px;
  height: 105px;
  color: #fff;
  &.type1 {
    background: #61C4D3;
  }
  &.type2 {
    background: #61C4D3;
  }
  &.type3 {
    background: #61C4D3;
  }
  .top, .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 18px;
  }
  .money {
    font-size: 14px;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-bottom: 10px;
    .money {
      display: inline-block;
    }
  }
  .desc {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
  }
}
</style>
